<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<div id="console"></div>

<span id="container"></span>
<span id="reference"><div></div><span>1,</span><span>2,</span><span>3,</span><div></div></span>

<script>
    description('You should see two lines, both with 1,2,3.');
    var last;

    function insert(tagName, id)
    {
        last = container.insertBefore(document.createElement(tagName), last);
        if (id)
            last.id = id;
        getComputedStyle(last).color; // attach.
        return last;
    }

    var container = document.getElementById('container');
    var div = container.appendChild(document.createElement('div'));
    getComputedStyle(div).color; // attach.

    // This inserts the elements in the reverse order they appear in the DOM
    // calling layout()
    insert('div');
    insert('span', 3).textContent = '3,';
    insert('span', 2).textContent = '2,';
    insert('span', 1).textContent = '1,';
    shouldBeGreaterThanOrEqual("document.getElementById('3').offsetLeft", "document.getElementById('2').offsetLeft");
    shouldBeGreaterThanOrEqual("document.getElementById('2').offsetLeft", "document.getElementById('1').offsetLeft");
</script>
